<script setup lang='ts' name="card">
import { toRefs } from 'vue'

const props = defineProps<{
    data: any
}>()

const emits = defineEmits(['clickHandle'])

const { data } = toRefs(props)

const goto: any = ['立即招募', '询价对标', '立即入驻', '立即下单']

const count: any = ['3000', '15W', '20亿', '3000']
</script>

<template>
    <div class="card"
         mb-20
    >
        <div v-for="(item, index) in data"
             :key="item"
             class="card-item mb-20"
        >
            <div class="card-desc">
                <img :src="item.img"
                     class="object-fill absolute inset-0 z-0"
                     alt=""
                >

                <div class="text-16 text-white absolute left-16 top-60 z-100">
                    <span class="text-36">{{ count[index] }}+</span> {{ item?.name }}

                    <div class="text-14 absolute z-100">
                        {{ item?.info }}
                    </div>
                </div>
            </div>

            <div class="card-link"
                 @click="() => emits('clickHandle', item)"
            >
                <span>{{ goto[index] }}</span>

                <i class="i-ep:arrow-right" />
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .card-item {
        height: 202px;
        width: 295px;

        .card-desc {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 152px;
            color: #fff;
            border-radius: 4px 4px 0 0;
            transition: all 0.3s;
            cursor: pointer;

            span {
                font-style: oblique;
            }

            p {
                color: #fff;
            }

            &:hover {
                top: -3px;
                box-shadow: 0 2px 8px rgb(0 0 0 / 50%);
            }

            &::before {
                z-index: 1;
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 4px 4px 0 0;
                background-color: rgb(0 0 0 / 50%);
            }
        }

        .card-link {
            display: flex;
            align-items: center;
            padding-left: 16px;
            line-height: 50px;
            font-size: 14px;
            color: #1d2129;
            cursor: pointer;
            background: #fff;
            border-radius: 0 0 4px 4px;

            &:hover {
                color: red;
            }
        }
    }
}
</style>
